<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    input {
      outline: none;
      box-sizing: border-box;
    }
    body {
      display: flex;
      margin: 0;
      padding: 0;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #000;
      font-family: Georgia, "Times New Roman", Times, serif;
    }

    .container {
      width: 450px;
      background-color: #fff;
      padding: 40px;
      border-radius: 8px;
    }
    .container .form_box {
        position: relative;
        width: 100%;
        height: 60px;
        overflow: hidden;
    }

    .container .form_box input {
        width: 100%;
        height: 100%;
        border: none;
        font-size: 17px;
        border-bottom: solid 2px #e6e6e6;
        padding-top: 20px;
        box-sizing: border-box;
    }

    .container .form_box input:focus ~ label,
    .container .form_box input:valid ~ label {
        transform: translateY(-25px);
        font-size: 14px;
        color: rgb(60, 138, 247);
        font-weight: 800;
    }

    .container .form_box label {
        left: 0;
        bottom: 10px;
        position: absolute;
        pointer-events: none;
        transition: all .3s ease;
    }

    .container .form_box .underline {
        position: absolute;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: rgb(35,188,249);
        transform: translateX(-450px);
        transition: all .3s ease;
    }

    .container .form_box input:focus ~ .underline,
    .container .form_box input:valid ~ .underline {
        transform: translateX(0);
    }
  </style>
  <body>
    <div class="container">
      <div class="form_box">
        <input type="text" required />
        <div class="underline"></div>
        <label>用户名</label>
      </div>
    </div>
  </body>
</html>
